<button
  class="addNode"
  matTooltip="Add a node"
  matTooltipClass="custom-tooltip"
  mat-icon-button
  class="menu-button add-menu-button"
  [matMenuTriggerFor]="mainMenu"
>
  <mat-icon>add</mat-icon>
</button>

<mat-menu #mainMenu="matMenu">
   <div class="templateMenu">
     <div class="templateMenuHeader">
        <button mat-menu-item (click)="openDialog()">
         <mat-icon>add_to_queue</mat-icon>
         <span>
            Insert New Node...
         </span>
        </button>
        <button mat-menu-item (click)="addNewTemplate()">
         <mat-icon>library_add</mat-icon>
         <span>
            New Template...
         </span>
        </button>
     </div>

     <div class="templateFilterBar">
        <mat-form-field (click)="$event.stopPropagation()" class="form-field" floatPlaceholder="never">
         <input
           matInput
           placeholder="Filter by name"
           search="search"
           (keyup)="filterTemplates($event)"
           [(ngModel)]="searchText"
           [ngModelOptions]="{ standalone: true }"
         />
         <mat-icon class="searchIcon" matSuffix>search</mat-icon>
       </mat-form-field>
       <mat-form-field (click)="$event.stopPropagation()" class="form-field">
         <mat-select
           [ngModelOptions]="{ standalone: true }"
           placeholder="Filter by type"
           (selectionChange)="filterTemplates($event)"
           [(ngModel)]="selectedType"
         >
           <mat-option *ngFor="let type of templateTypes" [value]="type">
             {{ type }}
           </mat-option>
         </mat-select>
       </mat-form-field>
     </div>

     <div class="menu">
       <div class="templateList">
         <mat-list-item *ngFor="let template of filteredTemplates; let i = index">
           <span *ngIf="i % 4 === 0" class="templateRow">
             <span class="templateIcon">
               <div
                 mwlDraggable
                 (dragStart)="dragStart($event)"
                 (dragEnd)="dragEnd($event, filteredTemplates[i])"
                 class="iconContainer">
                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
               </div>
               <div class="templateText">{{ filteredTemplates[i].name }}</div>
             </span>
             <span *ngIf="filteredTemplates[i + 1]" class="templateIcon">
               <div
                 mwlDraggable
                 (dragStart)="dragStart($event)"
                 (dragEnd)="dragEnd($event, filteredTemplates[i + 1])"
                 class="iconContainer">
                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
               </div>
               <div class="templateText">{{ filteredTemplates[i + 1].name }}</div>
             </span>
             <span *ngIf="filteredTemplates[i + 2]" class="templateIcon">
               <div
                 mwlDraggable
                 (dragStart)="dragStart($event)"
                 (dragEnd)="dragEnd($event, filteredTemplates[i + 2])"
                 class="iconContainer">
                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
               </div>
               <div class="templateText">{{ filteredTemplates[i + 2].name }}</div>
             </span>
             <span *ngIf="filteredTemplates[i + 3]" class="templateIcon">
               <div
                 mwlDraggable
                 (dragStart)="dragStart($event)"
                 (dragEnd)="dragEnd($event, filteredTemplates[i + 3])"
                 class="iconContainer">
                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
               </div>
               <div class="templateText">{{ filteredTemplates[i + 3].name }}</div>
             </span>
           </span>
         </mat-list-item>
       </div>
     </div>
   </div>
</mat-menu>